<template>
	<view class="my">
		<!--头部-->
		<view class="my-header">
			<view v-for="item in data.menuList" :key="item.item">
				<view class="header_item" :class="data.nMenu === item.item ? 'active' : ''" @tap="gomenu(item)">{{
				item.item
			}}</view>
			</view>
		</view>
		<!--内容管理-->
		<view class="my-content">
			<uni-card v-for="item in data.contentList" :key="item.product_order_id">
				<view class="card_v">
					<image class="img" :src="item.g_img[0].url"></image>
					<view class="uni-body">
						<view class="name">{{ item.g_name }}</view>
						<view class="info">{{ item.g_info }}</view>
						<view class="num">x{{ item.product_order_num }}</view>
					</view>
				</view>
				<view class="money">实付款￥{{ item.product_order_money }}{{ (item.product_order_money + '').indexOf('.') ==
				-1 ? '.00' : '' }}</view>
				<view class="card-actions">
					<view v-if="item.product_order_state == 1 || item.product_order_state == 2|| item.product_order_state == 3" class="card-actions-item" @tap="refund('申请退款', item)">
						<text class="card-actions-item-text">申请退款</text>
					</view>
					<view v-if="item.product_order_state == 2|| item.product_order_state == 3"  style="margin: 0 20rpx;" class="card-actions-item" @tap="refund('查看物流', item)">
						<text class="card-actions-item-text">查看物流</text>
					</view>
					<view class="card-actions-item sh" @tap="actionsClick(item.product_order_state, item)">
						<text v-if="item.product_order_state == 4" class="card-actions-item-text">售后详情</text>
						<text v-if="item.product_order_state == 0" class="card-actions-item-text">退款成功</text>
						<text v-else-if="item.product_order_state == 3" class="card-actions-item-text">去评论</text>
						<text v-else-if="item.product_order_state == 1" class="card-actions-item-text">催发货</text>
						<text v-else-if="item.product_order_state == 2" class="card-actions-item-text">确认收货</text>
					</view>
				</view>
			</uni-card>
		</view>
		<!-- 提示信息弹窗 -->
		<uni-popup ref="actionsMessage" type="message">
			<uni-popup-message type="warn" :message="message" :duration="2000"></uni-popup-message>
		</uni-popup>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="同意" title="是否确认收货!" @confirm="dialogConfirm"
				@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="input" title="请输入退款理由" value="七天无理由!" placeholder="请输入退款理由"
				@confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>


<script setup lang="ts">
import { onLoad, onShow } from '@dcloudio/uni-app'
import { ref, reactive, toRefs } from 'vue'
import { productOrderListApi, productOrderPutApi } from '../../https/http'
const actionsMessage = ref()
const alertDialog = ref()
const inputDialog = ref()
const message = ref("")
const data = reactive<{
	menuList: {
		item: string,
		value: number
	}[]
	nMenu: string
	u_id: string

	contentList: {
		product_order_id: number
		product_order_state: number
		g_img: {
			url: string
		}[]
		g_name: string
		g_info: string
		product_order_num: string
		product_order_money: string
	}[]
}>({
	menuList: [
		{
			item: '全部',
			value: 5
		},
		// {
		// 	item:'待付款',
		// 	value:0
		// },
		{
			item: '待发货',
			value: 1
		}, {
			item: '待收货',
			value: 2
		}, {
			item: '待评价',
			value: 3
		}, {
			item: '退款/售后',
			value: 4
		}, {
			item: '以退款',
			value: 0
		}
	],
	nMenu: '全部',
	u_id: '',
	contentList: []

})
const cover = 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg'
onShow(()=>{
	newData()
})
onLoad((e: any) => {
	try {
		const user = uni.getStorageSync('d_user');
		const token = uni.getStorageSync('d_token');
		const usern = uni.getStorageSync('d_usern');
		const avatar = uni.getStorageSync('d_avatar');
		if (user && token && usern && avatar) {
			data.u_id = usern
			newData(e.state)
		} else {
			uni.redirectTo({
				url: "/pages/login/login"
			})
		}
	} catch (error) {
		console.log(error);
	}
	data.menuList.forEach(element => {
		if (element.value == e.state) {
			data.nMenu = element.item
		}
	});
})
const newData = async (item = 5) => {
	const res = await productOrderListApi(data.u_id, item)
	res.data.forEach((item: any, index) => {
		item.g_img = JSON.parse(item.g_img)
	})
	data.contentList = res.data as any
}
const gomenu = (item: { item: string, value: any }) => {
	data.nMenu = item.item
	newData(item.value)
}
const acitem = ref()
const actionsClick = async (state: any, item: any) => {
	if (state == 1) {
		message.value = "催发货成功!"
		actionsMessage.value.open()
	} else if (state == 2) {
		acitem.value = item
		alertDialog.value.open()
	} else if (state == 3) {
		message.value = "暂无此功能!"
		actionsMessage.value.open()
	} else if (state == 4) {
		console.log("售后详情");
	}
}
const refund = (text: any, item: any) => {
	if (text === "申请退款") {
		acitem.value = item
		inputDialog.value.open()
	} else if (text === "查看物流") {
		uni.navigateTo({
			url: `/pages/logistics/logistics?id=${item.product_order_id}`
		});
	} else {
		console.log("item");
	}

}
const dialogConfirm = async () => {
	const datas = {
		product_order_id: acitem.value.product_order_id,
		product_order_state: 3
	}
	try {
		const res = await productOrderPutApi(data.u_id, datas)
		if (res.code == 200) {
			newData()
		}
	} catch (error) {
		console.log(error);
	}

}
const dialogClose = () => {
	console.log("关闭");
}
const dialogInputConfirm = async(v:any) => {
	const datas = {
		product_order_id: acitem.value.product_order_id,
		product_order_state: 4
	}
	try {
		const res = await productOrderPutApi(data.u_id, datas)
		if (res.code == 200) {
			newData()
		}
	} catch (error) {
		console.log(error);
	}

}
</script>

<style scoped lang="scss">
.my-header {
	display: flex;
	width: 100%;
	margin-top: 20rpx;
	justify-content: space-evenly;

	.header_item {
		/* border: 2px solid red; */
		flex: 1;
		line-height: 40px;
		font-size: 28rpx;
	}

	.active {
		/* color: red; */
		font-weight: bold;
		font-size: 32rpx;
	}
}

.my-content {
	.card_v {
		display: flex;
		width: 100%;
		align-items: center;

		.img {
			width: 80%;
			height: 200rpx;
			margin-right: 20rpx;
		}

		.uni-body {
			width: 110%;
			position: relative;

			.num {
				border: 1px solid #ccc;
				position: absolute;
				top: 20rpx;
				right: 0;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.info {
				/* height: 130rpx; */
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				-webkit-box-orient: vertical;
				min-height: 100rpx;
			}

			.name {
				margin: 20rpx 0 20rpx 0;
			}
		}
	}

	.money {
		color: red;
		font-weight: 700;
		font-size: 30rpx;
		float: right;
		margin-top: 20rpx;
	}

	.card-actions {
		margin-top: 80rpx;
		display: flex;
		justify-content: flex-end;
		width: 100%;

		.card-actions-item {
			border: 1px solid #ccc;
			padding: 20rpx 40rpx;
			border-radius: 50rpx;
		}

		.sh {
			border: 1px solid #ff4141;
			color: #ff4141;
		}
	}
}
</style>
